<!--
 * @Author: 胡俊/treence
 * @Date: 2022-05-24 09:45:03
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-14 16:34:11
 * @Description: 
 * @Email: treence@gmail.com
 * @Company: 3xData
 * @youWant: 我的=》工作场所
-->


<template>
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <!-- 内容 -->
    <!--// todo  -->
    <view class="main"
          v-if="list.length > 0">
      <view v-for="item,i in list"
            :key="i">
        <view class="card"
              @click="toForm(item.siteId)">
          <image mode="widthFix"
                 class="icon"
                 :src="baseImgUrl + '/myZone/decorate_titleArrow.png'" />
          <view class="title">{{item.name}}</view>
          <view class="subTitle">地址: {{item.address}}</view>
          <view class="content">面积：{{item.areaSize}}</view>
        </view>
      </view>
    </view>
    <no-data v-else
             text="暂无工作场所"></no-data>
    <!-- 底部新增 -->
    <view class="footer">
      <view class="btn_add"
            @click="toForm()">
        <view class="cuIcon-add" />
        新增工作场所
      </view>
    </view>
  </view>
</template> 
<script>
import { baseImgUrl } from "@/config.js";
export default {
  data () {
    return {
      baseImgUrl: baseImgUrl,
      navOptions: {
        left: {
          icon: 'back'
        },
        center: {
          title: "工作场所列表"
        }
      },
      // 列表数据
      searchObject: {
        // 搜索条件
        pageNo: 1,
        pageSize: 1000,
      },
      list: [],
      loading: false,
    }
  },
  onShow: function () {
    this.getList()
  },
  methods: {

    // 跳转表单
    toForm (id) {
      // 如果有id
      if (id) {
        uni.navigateTo({
          url: './site?id=' + id
        })
      } else {
        uni.navigateTo({
          url: './site'
        })
      }
    },
    // 获取表单信息
    getList () {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      this.$store.dispatch('site_list', this.searchObject)
        .then(res => {
          if (res && res.code === 200) {
            this.list = res.data.items
          }
        })
        .finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.container_page {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #eff1f7;
  .main {
    height: 80vh;
    .card {
      border-radius: 24rpx;
      background: white;
      padding: 24rpx;
      position: relative;
      margin-bottom: 24rpx;
      & > view:not(:last-child) {
        margin-bottom: 20rpx;
      }
      .icon {
        position: absolute;
        top: 60rpx;
        margin-left: 650rpx;
        width: 20rpx;
      }
      .title {
        color: #333;
        font-weight: bold;
        font-size: 36rpx;
        margin-bottom: 24rpx;
      }
      .subTitle {
        font-size: 30rpx;
        color: #333;
      }
      .content {
        color: #345ac7;
        padding: 6rpx 12rpx;
        display: inline-block;
        background-color: rgba(51, 91, 199, 0.1);
        border-radius: 20rpx;
      }

      &:after {
        position: absolute;
        right: 0;
        top: 0;
        color: white;
        padding: 6rpx 12px;
        border-radius: 0 20rpx;
      }
    }
  }
  .footer {
    position: fixed;
    width: 100%;
    background: white;
    bottom: 0;
    padding: 24rpx;
    border-radius: 20rpx 20rpx 0 0;
    box-shadow: 0 -10rpx 10rpx 0 rgba(0, 0, 0, 0.2);
    .btn_add {
      background-color: #345ac7;
      border-radius: 20rpx;
      text-align: center;
      color: white;
      font-size: 36rpx;
      line-height: 80rpx;
      .cuIcon-add {
        display: inline-block;
      }
    }
  }
}
</style>